<template>
  <div class="columnModel" id="columnModel">
        <baseTable
          :columns="columns.staticzeColumns3"
          :dataSource="configData2.records"
          :total="configData2.total"
          :pageCurrent="pageCurrent"
          :pageSize="pageSize"
          :isSelect="true"
          :rowSelection="1"
          :scroll="scroll"
          ref="searchBaseTables"
          :isShowPagination="true"
          :showCheckDelete="false"
          @changePage="changePage"
          disabledParam="status"
          :disabledValue="true"
        >
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.ellipsis">
              <table-tool-tip :text="text" :column="column"></table-tool-tip>
            </template>
            <template v-if="column.dataIndex === 'type'">
              {{ typeFn(text) }}
            </template>
          </template>
        </baseTable>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from "vue";
import baseTable from "@/components/table/baseTable.vue";
import tableToolTip from "@/components/table/tableToolTip.vue";
import columns from "@/components/table/tableConfig/columnsName";
import request from "@/api/index";
import { scrollType, modeProp } from "@/type.d";
import { checkuserManage } from "./formRuler";
import { useRoute, useRouter } from "vue-router";

// type
type configDataType = {
  total: number;
  size: number;
  records: any[];
};
interface dataSourceType {
  [propName: string]: any;
}
interface DataList {
  [propName: string | number]: any;
}

//data
let scroll: scrollType = reactive({ y: "", isFixed: false }); // 表单滚动设置
const route = useRoute() as any;
//表格数据
let configData2 = reactive<configDataType>({ total: 0, size: 20, records: [] });
const searchBaseTables = ref<any>(null);
// 当前页和数量
const pageCurrent = ref<number>(1);
const pageSize = ref<number>(20);
// 模态框数据
let rowSelection2 = ref<(string | number)[]>([]);
//computed
rowSelection2 = computed(() => {
  return searchBaseTables?.value?.selectedRowKeys || [];
});

//methods
const typeFn = (val: any) => {
  return val == 1 ? '站点' : val == 2 ? '栏目' : val == 3 ? '栏目和栏目下内容' : val == 4 ? '专题' : val == 5 ? '内容' : val == 6 ? '首页' : '' 
};
// 获取表格数据
const getRdecord2 = () => {
    const data: {} = {
    pageNumber: pageCurrent.value,
    pageSize: pageSize.value,
    taskId: route.query.id,
  };
  request.webStaticDetail(data).then((res: any) => {
    configData2.total = res.total;
    configData2.size = res.size;
    pageCurrent.value = res.current;
    configData2.records = res.records;
  });
};
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  pageCurrent.value = data.pageCurrent;
  pageSize.value = data.pageSize;
  getRdecord2();
};
//onmounted
onMounted(() => {
  getRdecord2()
});
</script>
<style lang="scss" scoped>
.columnModel {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background-color: #fff;
  overflow: hidden;
  :deep(.ant-table-body) {
    height: 618px;
  }
  .table-right {
    margin-left: 20px;
  }
  .site-name:hover {
    //color: #1f6ded;
    //cursor: pointer;
  }
  .site-name-active {
    color: #1f6ded;
  }
  ::v-deep(.ant-table-wrapper) {
    width: 100%;
  }

  ::v-deep(.ant-table-row-expand-icon) {
    border: none;
    background: transparent;
  }

  :deep(.ant-table-cell:nth-last-of-type(1)) {
    padding-left: 0;
    text-align: left;
  }
  .eidtRecords {
    margin-right: 16px;
  }

  .disable {
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
  }
}
.model-tip {
  margin-top: 8px;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
}

.tag-item {
  margin-bottom: 0 !important;
}
.title-tips {
  display: flex;
  margin-bottom: 24px;
  padding: 8px 16px;
  width: 592px;
  font-size: 14px;
  border: 1px solid #9cccff;
  border-radius: 2px;
  background-color: #edf7ff;
  .iconfont {
    margin-top: -4px;
    margin-right: 9px;
    font-size: 20px;
    color: #1f6ded;
  }
}
:deep(.ant-form-item:nth-last-of-type(1)) {
  margin-left: 0px;
}

::v-deep(.ant-input-number) {
  width: 136px;
  margin-left: 4px;
}

::v-deep(.ant-input-affix-wrapper) {
  width: 471px;
  // margin-left: 4px;
}

::v-deep(.ant-form-item) {
  display: flex;

  .ant-form-item-label {
    flex-grow: 0;
    width: 120px;
    text-align: right;
  }
}

::v-deep(.ant-select) {
  width: 96px;
}

::v-deep(.ant-form-item-control-input-content:hover) {
  .anticon-close-circle {
    display: block;
  }

  // .ant-input-show-count-suffix {
  //   // display: none;
  // }
}

::v-deep(.anticon-close-circle) {
  // display: none;
}
::v-deep(.anticon.ant-input-clear-icon-has-suffix) {
  // margin-right: 20px;
}
::v-deep(.draggTable .ant-table-row) {
  cursor: auto;
  user-select: auto;
}

.addButtons {
  display: flex;
  align-items: center;
  width: 84px;
  padding: 4px 12px;
  border-radius: 2px;
  .icon-plus {
    margin-right: 8px;
  }
}
.selectLable {
  font-size: 14px;
  margin-left: 15px;
}
.content_id::before {
  display: inline-block;
    margin-right: 4px;
    color: #ff4d4f;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '*';
}
</style>
<style lang="less" scoped>
.staticize-input {
  .iconfont {
    margin-left: 10px;
    cursor: pointer;
  }
}

::v-deep(.uporg-text) {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}
::v-deep(.ant-tree-switcher) {
  // display: none !important;
}
::v-deep(.ant-tree .ant-tree-treenode) {
  padding: 0 !important;
}
.fileName {
  white-space: nowrap;
}
.disable {
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed !important;
  }
.tips_text {
  margin-left: 8px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
}

</style>
